<template>
   <div>
       <el-row class="tac">
           <el-col :span="12" style="width: 200px">
               <h5 style="text-align: center" >欢迎使用！{{this.username}}</h5>
               <el-menu
                       :router="true"
                       default-active="this.$route.path"
                       class="el-menu-vertical-demo"
                       @open="handleOpen"
                       @close="handleClose">
                   <el-submenu index="1">
                       <template slot="title">
                           <i class="el-icon-location"></i>
                           <span>读者管理</span>
                       </template>
                       <el-menu-item-group>
                           <template slot="title"></template>
                           <el-menu-item index="/reader/applyForLibraryCard" >办理图书证</el-menu-item>
                           <el-menu-item index="/reader/changeLibraryCardInfo">变更借书证</el-menu-item>
                           <el-menu-item index="/reader/reportLoss">挂失借书证</el-menu-item>
                           <el-menu-item index="/reader/cancelReportLoss">解除挂失借书证</el-menu-item>
                           <el-menu-item index="/reader/postRegisterCard">补办借书证</el-menu-item>
                           <el-menu-item index="/reader/cancelAccount">注销借书证</el-menu-item>
                       </el-menu-item-group>

                   </el-submenu>
                   <el-submenu index="2">
                       <template slot="title">
                           <i class="el-icon-location"></i>
                           <span>图书管理</span>
                       </template>
                       <el-menu-item-group>
                           <template slot="title"></template>
                           <el-menu-item index="2-1">图书编目</el-menu-item>
                           <el-menu-item index="/book/addBook">新书入库</el-menu-item>
                           <el-menu-item index="/book/updateBook">图书信息维护</el-menu-item>
                           <el-menu-item index="2-4">在馆图书变卖与销毁处理</el-menu-item>
                       </el-menu-item-group>

                   </el-submenu>
                   <el-submenu index="3">
                       <template slot="title">
                           <i class="el-icon-location"></i>
                           <span>借阅管理</span>
                       </template>
                       <el-menu-item-group>
                           <template slot="title"></template>
                           <el-menu-item index="/borrow/borrowBook">借书</el-menu-item>
                           <el-menu-item index="/borrow/renewBook">续借</el-menu-item>
                           <el-menu-item index="/borrow/returnBook">还书</el-menu-item>
                       </el-menu-item-group>

                   </el-submenu>

               </el-menu>
           </el-col>
       </el-row>
   </div>

</template>

<script>


    import {mapState} from "vuex";

    export default {
        name: "",
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            goHome(){
                this.$router.push("/home")
            }
        },
        computed: {
            ...mapState({
                loginReader: (state) => state.Reader.loginReader
            }),
            username(){
                return sessionStorage.getItem("username")
            }
        }
    }
</script>

<style scoped>

</style>
